<template>
  <nav class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`">
    <div class="aui-width"  :class="`aui-width--${$store.state.layoutType}`">
      <div class="aui-navbar__header">
        <h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
          <a class="aui-navbar__brand-lg" href="javascript:;">广远IM即时聊天平台</a>
          <a class="aui-navbar__brand-mini" href="javascript:;">IM</a>
        </h1>
      </div>
      <div class="aui-navbar__body">
        <el-menu v-if="$store.state.layoutType === 'default'" :default-active="activeIndex" class="aui-navbar__menu mr-auto" mode="horizontal">
          <el-menu-item index="-1" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
            <svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch" aria-hidden="true"><use xlink:href="#icon-outdent"></use></svg>
          </el-menu-item>
        </el-menu>
        <el-menu
            :default-active="$store.state.sidebarMenuActiveName"
            :collapse="false"
            :unique-opened="true"
            :collapseTransition="false"
            mode="horizontal"
            v-if="$store.state.layoutType === 'top'"
            class="aui-navbar__menu mr-auto">
          <sub-menu v-for="menu in $store.state.sidebarMenuList" :key="menu.id" :menu="menu" />
        </el-menu>
        <el-menu class="aui-navbar__menu" mode="horizontal">
          <el-menu-item index="3" @click="fullscreenHandle()">
            <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-fullscreen"></use></svg>
          </el-menu-item>
          <el-menu-item index="4" class="aui-navbar__avatar">
            <el-dropdown placement="bottom" :show-timeout="0">
            <span class="el-dropdown-link">
              <img src="~@/assets/img/avatar.gif">
              <span>{{ $store.state.user.name }}</span>
              <i class="el-icon-arrow-down"></i>
            </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="updatePasswordHandle()">个人设置</el-dropdown-item>
                <el-dropdown-item @click.native="logoutHandle()">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <!-- 消息通知 -->
    <news-tab ref="newsTab"></news-tab>
  </nav>
</template>

<script>
import screenfull from 'screenfull'
import SubMenu from './main-sidebar-sub-menu'
import newsTab from './pages/news'
import { clearLoginInfo } from '@/utils'
export default {
  data () {
    return {
      updatePassowrdVisible: false,
      activeIndex: '1067246875800000035',
      animationSpeed: 1,
      anim: {}
    }
  },
  components: {
    SubMenu,
    newsTab
  },
  created () {
    this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
    this.activeIndex = window.SITE_CONFIG['activeIndex']
  },
  methods: {
    // 显示消息通知
    showNewsTab () {
      this.$refs.newsTab.init()
    },
    // 全屏
    fullscreenHandle () {
      if (!screenfull.enabled) {
        return this.$message({
          message: '您的浏览器不支持此操作',
          type: 'warning',
          duration: 500
        })
      }
      screenfull.toggle()
    },
    // 个人设置
    updatePasswordHandle () {
      this.$router.push({ path: 'user-set' })
    },
    // 退出
    logoutHandle () {
      this.$confirm('退出登录', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        clearLoginInfo()
        this.$router.push({ name: 'login' })
      }).catch(() => {})
    },
    // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
    gotoRouteHandle (menuId) {
      this.$store.state.topSidebarMenuList.map(item => {
        if (item.id === menuId) {
          this.$store.state.sidebarMenuList = item.children
          // 默认打开第一个
          var route = null
          if (this.$store.state.sidebarMenuList[0].children && this.$store.state.sidebarMenuList[0].children.length >= 1) {
            route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(itemChildren => itemChildren.meta.menuId === this.$store.state.sidebarMenuList[0].children[0].id)[0]
            if (route) {
              this.$router.push({ name: route.name })
            }
          } else {
            route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(itemChildren => itemChildren.meta.menuId === this.$store.state.sidebarMenuList[0].id)[0]
            if (route) {
              this.$router.push({ name: route.name })
            }
          }
        }
      })
    }
  }
}
</script>
